<template>
  <div>
    <!-- 头部 -->
    <div class="back">
      <img src="../../assets/images/我的背景.jpg" alt="" />
      <span class="set" @click="set"></span>
      <span class="picture">
        <p>{{ name }}</p>
        <span @click="spanClick"></span>
        <img src="../../assets/images/矩形2(2).png" alt="" />
      </span>
    </div>
    <!-- 内容 -->
    <van-cell-group inset border>
      <van-cell is-link to="../../polite">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <img src="../../assets/images/邀请有礼.png" alt="" />
          <span class="custom-title">邀请有礼</span>
        </template>
      </van-cell>
      <van-cell is-link>
        <template #title>
          <img src="../../assets/images/规划师.png" alt="" />
          <span class="custom-title">我的学习规划师</span>
        </template>
      </van-cell>
      <van-cell is-link @click="dianji">
        <template #title>
          <img src="../../assets/images/公众号.png" alt="" />
          <span class="custom-title">关注公众号</span>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <img src="../../assets/images/矩形3.png" alt="" class="rectangle" />
        </template>
      </van-cell>
      <van-cell is-link>
        <template #title>
          <img src="../../assets/images/课程.png" alt="" />
          <span class="custom-title">课程明细</span>
        </template>
      </van-cell>
      <van-cell is-link>
        <template #title>
          <img src="../../assets/images/兑换.png" alt="" />
          <span class="custom-title">课程兑换</span>
        </template>
      </van-cell>
      <van-cell is-link to="../frist/diamond">
        <template #title>
          <img src="../../assets/images/钻石.png" alt="" />
          <span class="custom-title">钻石明细</span>
        </template>
      </van-cell>
      <van-cell is-link>
        <template #title>
          <img src="../../assets/images/学习报告.png" alt="" />
          <span class="custom-title">学习报告</span>
        </template>
      </van-cell>
      <van-cell is-link>
        <template #title>
          <img src="../../assets/images/跟读.png" alt="" />
          <span class="custom-title">跟读作品</span>
        </template>
      </van-cell>
      <van-cell is-link>
        <template #title>
          <img src="../../assets/images/物流.png" alt="" />
          <span class="custom-title">物流详情</span>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <img src="../../assets/images/矩形3.png" alt="" class="rectangle" />
        </template>
      </van-cell>
      <van-cell is-link to="../frist/facility">
        <template #title>
          <img src="../../assets/images/设备.png" alt="" />
          <span class="custom-title">设备检测</span>
        </template>
      </van-cell>
      <van-cell is-link>
        <template #title>
          <img src="../../assets/images/帮助.png" alt="" />
          <span class="custom-title">帮助与反馈</span>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { Cell, CellGroup, Dialog } from "vant";
import { useRouter } from "vue-router";

export default {
  components: {
    vanCellGroup: CellGroup,
    vanCell: Cell,
    [Dialog.Component.name]: Dialog.Component,
  },

  setup() {
    //从本地存储里面获取姓名
    let name;
    if (localStorage.getItem("name")) {
      name = localStorage.getItem("name");
    } else {
      name = "Hi,Baker";
    }

    //
    const router = useRouter();
    const dianji = () => {
      Dialog({
        title: "关注爱课公众号",
        message: "您将获得以下集中特权",
      });
    };
    const set = () => {
      router.push("/setup");
    };
    const spanClick = () => {
      router.push("/personal");
    };
    return {
      dianji,
      set,
      spanClick,
      name,
    };
  },
  mehtods: {},
};
</script>

<style lang="less" scoped>
div {
  position: relative;
  .back {
    position: relative;
    img {
      width: 100%;
      height: 250px;
    }
    .set {
      background: url("../../assets/images/设置.png") no-repeat;
      z-index: 999;
      height: 22px;
      width: 22px;
      top: 60px;
      right: 15px;
      position: absolute;
    }
    .picture {
      background: url("../../assets/images/图层1(2).png") no-repeat;
      z-index: 999;
      position: absolute;
      width: 58px;
      height: 58px;
      top: 90px;
      left: 25px;
      p {
        width: 200px;
        margin-top: 77px;
        color: #fff;
      }
      span {
        background: url("../../assets/images/形状 42.png") no-repeat;
        z-index: 999;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 84px;
        left: 117px;
      }
      img {
        z-index: 100;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 82px;
        left: 113px;
      }
    }
  }
  /deep/.van-cell-group {
    padding: 0px !important;
  }
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }
  .van-cell__title {
    img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
      margin-right: 15px;
    }
  }

  .van-cell:nth-child(13) {
    margin-bottom: 90px;
  }
  .van-cell {
    padding: 12px 0 !important;
    .rectangle {
      width: 100%;
      height: 5px;
    }
  }
  /deep/.van-cell::after {
    border: none !important;
  }
}
</style>
